<template>
  <div class="page-container">
    <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
    <div class="scale-container">
      <!-- 顶部标题 -->
      <div class="headTitle">{{ headTitle }}</div>
      <div class="headButton" @click="backHome"></div>
      <div class="left1" @click="goToService('shanghai')"></div>
      <div class="right1" @click="goToService('tianjin')"></div>
      <!-- 左边内容 -->
      <div class="left">
        <div class="box">
          <div class="headImg"></div>
          <div class="title">中汽股份</div>
          <div class="content">
            <img class="img1" src="/imgs/yancheng/4.png" />
            <p class="contentTitle">
              中汽股份（全称中汽研汽车试验场股份有限公司）成立于2011年3月30日，总部位于江苏省盐城市，是中国汽车技术研究中心有限公司（国务院国资委直属央企）的控股子公司。作为第三方汽车试验场服务商，其测试功能覆盖常规环境及极限环境（高寒、高温、高原、高腐蚀），试验道路总长超过110公里，服务对象包括汽车整车企业、检测机构及零部件供应商等。
              ‌
            </p>
            <p class="contentTitle">
              亚洲乃至全球范围内“场地规模宏大、测试功能齐全、技术指标先进、配套设施完善、客户资源广泛”的第三方汽车试验场。 </p>
          </div>
        </div>
        <div class="box2">
          <div class="headImg"></div>
          <div class="title">人才队伍</div>
          <div class="content">
            <div class="content1-1"></div>
          </div>
        </div>
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">资质荣誉</div>
          </div>
          <!-- 第一列滚动容器 -->
          <div class="content">
            <div class="scroll-container" data-type="qualification" data-col="1">
              <div class="scroll-item">
                <img class="img1" src="/imgs/yancheng/CNAS实验室认可.png" />
                <p class="contentTitle">CNAS实验室认可</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第二列滚动容器 -->
          <div class="content" style="margin-left: 1100px;">
            <div class="scroll-container" data-type="qualification" data-col="2">
              <div class="scroll-item">
                <img class="img1" src="/imgs/yancheng/国家高寒机动车质量检验检测中心.jpg" />
                <p class="contentTitle">国家高寒机动车质量检验检测中心</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
          <!-- 第三列滚动容器 -->
          <div class="content" style="margin-left: 2100px;">
            <div class="scroll-container" data-type="qualification" data-col="3">
              <div class="scroll-item">
                <img class="img1" src="/imgs/yancheng/国家技术标准创新基地.jpg" />
                <p class="contentTitle">国家技术标准创新基地</p>
              </div>
              <!-- 复制第一个条目用于无缝循环 -->
              <div class="scroll-item copy-first"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="middle">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="content">
          <div class="years">2011.12</div>
          <div class="values">中汽中心盐城汽车试验场开工奠基。（投资20亿，占地面积约6000亩）</div>
        </div>
        <div class="content2">
          <div class="years">2015.12</div>
          <div class="values">中汽股份一期综合汽车试验场正式运营。</div>
        </div>
        <div class="content3">
          <div class="years">2020.11</div>
          <div class="values">中汽股份二期“长三角（盐城）智能网联汽车 试验场”项目正式开工。（投资15亿,占地面积约4000亩） </div>
        </div>
        <div class="content4">
          <div class="years">2022.03</div>
          <div class="values">成功在深交所创业板上市，成为A股汽车试验 场领域第一股。</div>
        </div>
        <div class="content5">
          <div class="years">2024.07</div>
          <div class="values">“长三角（盐城）智能网联汽车试验场” 项目建成并投入运行。</div>
        </div>
        <div class="content6">
          <div class="years">2025.09</div>
          <div class="values">成功收购极限检验中心，实现从“常规环境” 到“极限环境”全场景、全天候、全领域覆盖。</div>
        </div>
        <div class="content15">中汽研汽车试验场股份有限公司</div>
        <div class="content18">
          <div class="tubiao1"></div>
          <span class="tubiaoTitle">注册资金<span class="tubiaoValue">36</span>亿元</span>
          <div class="tubiao2"></div>
          <span class="tubiaoTitle">占地面积<span class="tubiaoValue">15000</span>亩</span>
          <div class="tubiao3"></div>
          <span class="tubiaoTitle">测试公路长度<span class="tubiaoValue">110+</span>公里</span>
        </div>
        <div class="content19">
          <div class="img1"></div>
          <div class="img2"></div>
          <div class="img3"></div>
          <span class="title">盐城</span>
          <div class="pointImg"></div>
          <div class="img4"></div>
          <div class="img5"></div>
          <div ref="lottieRef" class="lottie-box"></div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right">
        <div class="box3">
          <div class="headbox">
            <div class="headImg"></div>
            <div class="title">主营业务</div>
          </div>
          <div class="content">
            <div class="title">场地试验技术服务</div>
            <div class="left-buttons">
              <div v-for="(page, index) in pages2" :key="index" class="btn" :class="{ active: currentPage2 === index }"
                @click="handleClick2(index)">
                {{ page.btnName }}
              </div>
            </div>
            <div class="rightbox">
              <!-- 页面背景图 -->
              <div class="box1-2" v-if="pages2[currentPage2].imgUrl"
                :style="{ backgroundImage: `url(${pages2[currentPage2].imgUrl})` }"></div>
              <!-- 内容包装器 -->
              <div class="content-wrapper">
                <div class="box1-1">
                  <div class="text" v-for="(paragraph, idx) in pages2[currentPage2].desc" :key="idx">{{ paragraph }}
                  </div>
                  <div class="content-items" v-if="pages2[currentPage2].items && pages2[currentPage2].items.length > 0">
                    <span class="item" v-for="(item, i) in pages2[currentPage2].items" :key="i">
                      {{ item }}
                      <span class="separator" v-if="i !== pages2[currentPage2].items.length - 1">|</span>
                    </span>
                  </div>
                  <!-- 2. 统计数据网格（2行2列） -->
                  <div class="stats-grid2" v-if="pages2[currentPage2].stats && pages2[currentPage2].stats.length > 0">
                    <div class="stat-item" v-for="(stat, idx) in pages2[currentPage2].stats" :key="idx">
                      <div class="stat-number">
                        {{ stat.number }}
                        <span class="stat-unit">{{ stat.unit }}</span>
                      </div>
                      <div class="stat-label">{{ stat.label }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="scene-grid"
              v-if="pages2[currentPage2].sceneItems && pages2[currentPage2].sceneItems.length > 0">
              <div class="scene-item" v-for="(item, idx) in pages2[currentPage2].sceneItems" :key="idx">
                <img :src="item.imgUrl" alt="场景图" class="scene-img">
                <div class="scene-name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="title">一站式技术服务</div>
            <div class="left-content">
              <div class="content-text">测试工程师</div>
              <div class="content-text">道路</div>
              <div class="content-text">测试设备</div>
              <div class="content-text">测试方案</div>
              <div class="content-text">综合解决方案</div>
            </div>
            <!--  @click="handleTagClick(tag)" -->
            <div class="function-tags">
              <div class="tag-btn" v-for="tag in functionTags" :key="tag.tagName"
                :class="{ active: activeTag === tag.tagName }">
                {{ tag.tagName }}
              </div>
            </div>
            <!-- 右侧主内容区域：根据contentModules数量+type渲染 -->
            <div class="main-content-container">
              <div class="main-content-area" v-for="module in currentContent.contentModules"
                :key="module.title || module.mainTitle">
                <!-- 版型1：标题+文字+单图 -->
                <div v-if="module.type === 'text-img'">
                  <div class="content-modules">
                    <div class="module-card">
                      <div class="module-title">{{ module.title }}</div>
                      <div class="module-desc">{{ module.desc }}</div>
                    </div>
                  </div>
                  <div class="main-img-wrapper">
                    <img v-if="module.mainImg" :src="module.mainImg" alt="模块主图" class="main-img" />
                  </div>
                </div>
                <!-- 版型2：标签+文字+多图 -->
                <div v-else-if="module.type === 'tags-imgs'">
                  <div class="performance-tags">
                    <span v-for="(tag, tIdx) in module.tags" :key="tIdx" class="tag">{{ tag }}</span>
                  </div>
                  <div class="content-modules">
                    <div class="module-card">
                      <div class="module-desc">{{ module.desc }}</div>
                    </div>
                  </div>
                  <div class="performance-imgs">
                    <div v-for="(img, iIdx) in module.imgs" :key="iIdx" class="img-item">
                      <img :src="img.url" alt="性能图" />
                      <span class="img-name">{{ img.name }}</span>
                    </div>
                  </div>
                </div>
                <!-- 版型3：子模块+多列文字 -->
                <div v-else-if="module.type === 'submodules-columns'">
                  <div class="intelligent-main-title">{{ module.mainTitle }}</div>
                  <div class="intelligent-submodules">
                    <div v-for="(sub, sIdx) in module.subModules" :key="sIdx" class="submodule">
                      <img :src="sub.url" alt="子模块图" />
                      <span class="submodule-name">{{ sub.name }}</span>
                    </div>
                  </div>
                  <div class="intelligent-columns">
                    <div v-for="(col, cIdx) in module.columns" :key="cIdx" class="column">
                      <div class="column-title">{{ col.title }}</div>
                      <div class="column-content">
                        <div v-for="(item, itemIdx) in col.content" :key="itemIdx">{{ item }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- todo页面切换这里没做 -->
          </div>
        </div>
        <div class="box4">
          <div class="content">
            <div class="title">场地试验技术服务</div>
            <div class="left-buttons">
              <div v-for="(page, index) in pages3" :key="index" class="btn" :class="{ active: currentPage3 === index }"
                @click="handleClick3(index)">
                {{ page.btnName }}
              </div>
            </div>
            <div class="rightbox">
              <!-- 页面背景图 -->
              <div class="box1-2" v-if="pages3[currentPage3].imgUrl"
                :style="{ backgroundImage: `url(${pages3[currentPage3].imgUrl})` }"></div>
              <!-- 内容包装器 -->
              <div class="content-wrapper">
                <div class="box1-1">
                  <div class="text" v-for="(paragraph, idx) in pages3[currentPage3].desc" :key="idx">{{ paragraph }}
                  </div>
                  <div class="content-items" v-if="pages3[currentPage3].items && pages3[currentPage3].items.length > 0">
                    <span class="item" v-for="(item, i) in pages3[currentPage3].items" :key="i">
                      {{ item }}
                      <span class="separator" v-if="i !== pages3[currentPage3].items.length - 1">|</span>
                    </span>
                  </div>
                  <!-- 2. 统计数据网格（2行2列） -->
                  <div class="stats-grid2" v-if="pages3[currentPage3].stats && pages3[currentPage3].stats.length > 0">
                    <div class="stat-item" v-for="(stat, idx) in pages3[currentPage3].stats" :key="idx">
                      <div class="stat-number">
                        {{ stat.number }}
                        <span class="stat-unit">{{ stat.unit }}</span>
                      </div>
                      <div class="stat-label">{{ stat.label }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="title">数字实验场</div>
            <div class="content-wrapper2">
              <div class="images-container">
                <div class="image-item" v-for="(img, index) in images2" :key="index">
                  <img :src="img.src" :alt="img.alt" class="test-image">
                  <p class="image-caption">{{ img.caption }}</p>
                </div>
              </div>
              <div class="cards-container">
                <div class="info-card" :style="gobackImage(index)" v-for="(card, index) in infoCards" :key="index">
                  <h3 class="card-title">{{ card.title }}</h3>
                  <ul class="card-content">
                    <li v-for="(item, i) in card.items" :key="i">{{ item }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="content">
            <div class="title">驾驶体验中心</div>
            <div class="content-wrapper2">
              <div class="images-container">
                <div class="image-item" v-for="(img, index) in images2" :key="index">
                  <img :src="img.src" :alt="img.alt" class="test-image">
                  <p class="image-caption">{{ img.caption }}</p>
                </div>
              </div>
              <div class="cards-container">
                <div class="info-card" :style="gobackImage(index)" v-for="(card, index) in infoCards" :key="index">
                  <h3 class="card-title">{{ card.title }}</h3>
                  <ul class="card-content">
                    <li v-for="(item, i) in card.items" :key="i">{{ item }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="title">汽车新品发布与媒体活动</div>
            <div class="content-wrapper2">
              <div class="images-container">
                <div class="image-item" v-for="(img, index) in images2" :key="index">
                  <img :src="img.src" :alt="img.alt" class="test-image">
                  <p class="image-caption">{{ img.caption }}</p>
                </div>
              </div>
              <div class="cards-container">
                <div class="info-card" :style="gobackImage(index)" v-for="(card, index) in infoCards" :key="index">
                  <h3 class="card-title">{{ card.title }}</h3>
                  <ul class="card-content">
                    <li v-for="(item, i) in card.items" :key="i">{{ item }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div> -->

          <div class="contentright2">
            <!-- 垂直标题 -->
            <div class="title">驾驶体验中心</div>
            <div class="content-wrapper3">
              <!-- 左侧描述面板（对应截图左侧文本区域） -->
              <div class="desc-panel">
                <p class="desc-text">
                  中汽股份坚持细分定位塑造专业化服务，全心打造汽车行业的专业驾驶培训基地，开辟新的紧扣试验场技术培训和汽车运动文化活动方式，为道路试验工程师搭建一流的培训平台，基本实现全路况驾驶模拟与训练。
                </p>
              </div>
              <!-- 右侧卡片列表（整合图片+卡片内容） -->
              <div class="card-container2">
                <div class="card-item2" v-for="(item, index) in drivingItems" :key="index">
                  <!-- 卡片内图片 -->
                  <img :src="item.src" :alt="item.alt" class="card-image2">
                  <!-- 卡片标题 -->
                  <h3 class="card-title2">{{ item.title }}</h3>
                  <!-- 卡片列表项 -->
                  <ul class="card-content2">
                    <li v-for="(listItem, i) in item.items" :key="i">{{ listItem }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div class="contentright3">
            <!-- 垂直标题（与之前板块风格统一） -->
            <div class="title">汽车新品发布与媒体活动</div>
            <div class="content-wrapper3 media-layout">
              <!-- 左侧：新品发布区域 -->
              <section class="media-section">
                <h3 class="section-subtitle">新品发布</h3>
                <div class="media-grid">
                  <div class="media-card" v-for="(item, idx) in newProductEvents" :key="idx">
                    <img :src="item.src" :alt="item.alt" class="media-img">
                    <p class="media-caption">{{ item.caption }}</p>
                  </div>
                </div>
              </section>
              <!-- 右侧：媒体活动区域 -->
              <section class="media-section">
                <h3 class="section-subtitle">媒体活动</h3>
                <div class="media-grid">
                  <div class="media-card" v-for="(item, idx) in mediaActivities" :key="idx">
                    <img :src="item.src" :alt="item.alt" class="media-img">
                    <p class="media-caption">{{ item.caption }}</p>
                  </div>
                </div>
              </section>
            </div>
          </div>



        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, onUnmounted, onBeforeUnmount } from "vue";
import lottie from 'lottie-web';
//路由
import { useRouter } from 'vue-router'
const router = useRouter();
// 驾驶体验中心数据（整合图片、标题、列表项）
const drivingItems = ref([
  {
    src: "/imgs/yancheng/汽车驾驶评价.jpg",
    alt: "汽车驾驶评价",
    title: "汽车驾驶评价",
    items: ["驾乘体验", "主被动安全", "整车性能", "属性功能"]
  },
  {
    src: "/imgs/yancheng/全范围培训体系.jpg",
    alt: "全范围培训体系",
    title: "全范围培训体系",
    items: ["驾驶技能评估", "进阶驾驶技能", "安全驾驶", "主客观测试技能"]
  },
  {
    src: "/imgs/yancheng/用户定制化.jpg",
    alt: "用户定制化",
    title: "用户定制化",
    items: ["准驾体系", "车手定向培养", "驾驶课程开发"]
  }
]);
// 新品发布数据（2×2网格）
const newProductEvents = ref([
  {
    src: "/imgs/yancheng/轮胎新品发布会.jpg",
    alt: "轮胎新品发布会",
    caption: "轮胎新品发布会"
  },
  {
    src: "/imgs/yancheng/汽车新品发布会.jpg",
    alt: "汽车新品发布会",
    caption: "汽车新品发布会"
  },
  {
    src: "/imgs/yancheng/汽车挑战赛.jpg",
    alt: "汽车挑战赛",
    caption: "汽车挑战赛"
  },
  {
    src: "/imgs/yancheng/汽车挑战会.jpg",
    alt: "汽车挑战会",
    caption: "汽车挑战会"
  }
]);
//跳转路由
const backHome = () => {
  router.push({ name: 'home' })
}
// 媒体活动数据（2×2网格）
const mediaActivities = ref([
  {
    src: "/imgs/yancheng/中国汽车风云盛典.jpg",
    alt: "中国汽车风云盛典",
    caption: "中国汽车风云盛典"
  },
  {
    src: "/imgs/yancheng/中国十佳底盘评选.jpg",
    alt: "中国十佳底盘评选",
    caption: "中国十佳底盘评选"
  },
  {
    src: "/imgs/yancheng/CCRT主观技能大赛.jpg",
    alt: "CCRT主观技能大赛",
    caption: "CCRT主观技能大赛"
  },
  {
    src: "/imgs/yancheng/“中国心”十佳发动机评选.jpg",
    alt: "\"中国心\"十佳发动机评选",
    caption: "\"中国心\"十佳发动机评选"
  }
]);
// 证书图片数组（实际项目中替换为真实图片路径）
const certificateImages = ref([
  '/imgs/tianjinnewenergy/图片1.png',
  '/imgs/tianjinnewenergy/图片2.png',
  '/imgs/tianjinnewenergy/图片3.png',
  '/imgs/tianjinnewenergy/图片4.png',
  '/imgs/tianjinnewenergy/图片5.png',
  '/imgs/tianjinnewenergy/图片6.png',
  '/imgs/tianjinnewenergy/图片7.png',
]);
// 图片数据
const images2 = ref([
  {
    src: '/imgs/yancheng/试验路面扫描.png',
    alt: '试验路面扫描',
    caption: '试验路面扫描'
  },
  {
    src: '/imgs/yancheng/数字试验场技术应用.png',
    alt: '数字试验场技术应用',
    caption: '数字试验场技术应用'
  }
]);
const gobackImage = (index) => {
  if (index === 0) {
    return {
      width: '249px',
      hght: '365px',
      backgroundImage: 'url(/imgs/yancheng/矩形 933 拷贝 11.png)',
    }
  } else if (index === 1) {
    return {
      width: '350px',
      hght: '365px',
      backgroundImage: 'url(/imgs/yancheng/矩形 933 拷贝 11(2).png)',
    }
  }
  else if (index === 2) {
    return {
      width: '351px',
      hght: '365px',
      backgroundImage: 'url(/imgs/yancheng/矩形 933 拷贝 11(2).png)',
    }
  }
}

// 信息卡片数据
const infoCards = ref([
  {
    title: '技术优势',
    items: [
      '指导设计',
      '缩短周期',
      '节约成本',
      '提高质量',
      '提升平台化'
    ]
  },
  {
    title: '业务内容',
    items: [
      '百种动力学仿真用数字路面',
      '44条 - 整车可靠性开发',
      '16条 - NVH性能开发',
      '25条 - 整车综合性能验证',
      '15条 - 商用车可靠性开发'
    ]
  },
  {
    title: '未来规划',
    items: [
      '智能网联虚拟仿真场景库',
      '驾驶模拟器用虚拟场景库',
      '"仿真试验到实车验证"一体化场地试验技术服务解决方案'
    ]
  }
]);
// 2. 响应式状态：当前页码（0-4，对应5页内容）
const currentPage2 = ref(0);
// 3. 自动轮播定时器
let timer2 = null;
// 切换到指定页
const handleClick2 = (index) => {
  currentPage2.value = index;
  resetTimer2(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage2 = () => {
  currentPage2.value = (currentPage2.value + 1) % pages2.length;
};
// 重置定时器
const resetTimer2 = () => {
  clearInterval(timer2);
  // timer2 = setInterval(goToNextPage2, 5000); // 5秒切换一次
};
//右边第一块数据
const pages2 = [
  {
    btnName: '综合汽车试验场',
    desc: ['26条标准跑道兼顾乘用车、商用车以及从传统能源到新能源汽车的研发测试需求。'],
    stats: [
      { number: "36", unit: "亿", label: "项目总投资" },
      { number: "10000", unit: "亩", label: "占地面积约" },
      { number: "110", unit: "公里", label: "测试道路约" },
      { number: "12", unit: "万平方米", label: "研发数据中心及实验室" }
    ],
    imgUrl: '/imgs/yancheng/主插图.jpg',
    sceneItems: [
      {
        imgUrl: '/imgs/yancheng/智能网联复杂环境多维模拟平台.jpg', // 图片路径
        name: "智能网联复杂环境多维模拟平台" // 下方文字
      },
      {
        imgUrl: '/imgs/yancheng/智能网联隧道.jpg',
        name: "智能网联隧道"
      },
      {
        imgUrl: '/imgs/yancheng/智能网联街区.jpg',
        name: "智能网联街区"
      },
      {
        imgUrl: '/imgs/yancheng/动态广场.png',
        name: "动态广场"
      },
      {
        imgUrl: '/imgs/yancheng/温操控湿圆环.jpg',
        name: "湿操控湿圆环"
      },
      {
        imgUrl: '/imgs/yancheng/高速环道.jpg',
        name: "高速环道"
      },
      {
        imgUrl: '/imgs/yancheng/强化耐久路.jpg',
        name: "强化耐久路"
      },
      {
        imgUrl: '/imgs/yancheng/智能网联柔性广场.jpg',
        name: "智能网联柔性广场"
      }
    ]
  },
  {
    btnName: '长三角(盐城)智能网联汽车试验场',
    desc: [
      "超前布局、国内领先的智能网联汽车和自动驾驶汽车研发测试的大型综合封闭试验场。",
      "满足总质量80吨重型商用车性能及可靠性研发测试需求。"
    ],
    stats: [
      { number: "15", unit: "亿", label: "项目总投资" },
      { number: "4000", unit: "亩", label: "占地面积约" },
      { number: "40", unit: "公里", label: "测试道路约" },
      { number: "3.2", unit: "万平方米", label: "研发数据中心及实验室" }
    ],
    imgUrl: '/imgs/长三角(盐城)智能网联汽车试验场/主插图.jpg',
    sceneItems: [
      {
        imgUrl: '/imgs/yancheng/长三角(盐城)智能网联汽车试验场/智能网联多车道性能路.png', // 图片路径
        name: "智能网联多车道性能路" // 下方文字
      },
      {
        imgUrl: '/imgs/yancheng/长三角(盐城)智能网联汽车试验场/智能网联城市街区.png', // 图片路径
        name: "智能网联城市街区"
      },
      {
        imgUrl: '/imgs/yancheng/长三角(盐城)智能网联汽车试验场/智能网联高架路立交桥.png', // 图片路径
        name: "智能网联高架路立交桥"
      },
      {
        imgUrl: '/imgs/yancheng/长三角(盐城)智能网联汽车试验场/智能网联多功能柔性广场.png', // 图片路径
        name: "智能网联多功能柔性广场"
      },
      {
        imgUrl: '/imgs/yancheng/长三角(盐城)智能网联汽车试验场/智能网联隧道.png', // 图片路径
        name: "智能网联隧道"
      },
      {
        imgUrl: '/imgs/yancheng/长三角(盐城)智能网联汽车试验场/智能网联高速环道.png', // 图片路径
        name: "智能网联高速环道"
      },
      {
        imgUrl: '/imgs/yancheng/长三角(盐城)智能网联汽车试验场/智能网联可靠性试验路.png', // 图片路径
        name: "智能网联可靠性试验路"
      },
      {
        imgUrl: '/imgs/yancheng/长三角(盐城)智能网联汽车试验场/智能网联越野广场.png', // 图片路径
        name: "智能网联越野广场"
      }
    ]
  },
  {
    btnName: '智能网联环境多维模拟平台',
    desc: ['平台总长300m，净高6米，双向四车道，含丁字交叉口。通过研究自然界气象环境（如雨、雾、光照等）的物理表征形式以及不同气象环境对智能汽车自动驾驶功能和性能的影响机理，并基于雨雾阵列技术和可控光源点阵技术，建立一种封闭场地环境下的气象广域物理多级可调模拟方法。'],
    items: ['降雨强度：5~120mm/h', '降雨等级：6级可调', '能见度：≥15m', '降雾等级：多级可调', '光照强度：5~3000lux', '光照等级：无级可调', '路灯模拟', '闪电模拟'],
    stats: [],
    imgUrl: '/imgs/yancheng/智能网联环境多维模拟平台/主插图.png',
    sceneItems: [
      {
        imgUrl: '/imgs/yancheng/智能网联环境多维模拟平台/中雨遇电动自行车闯红灯.png',
        name: "中雨遇电动自行车闯红灯"
      },
      {
        imgUrl: '/imgs/yancheng/智能网联环境多维模拟平台/团雾遇静止行人.png',
        name: "团雾遇静止行人"
      },
      {
        imgUrl: '/imgs/yancheng/智能网联环境多维模拟平台/雷暴雨遇前车静止.png',
        name: "复杂场景：雷暴雨遇前车静止"
      }, {
        imgUrl: '/imgs/yancheng/智能网联环境多维模拟平台/分级降雨实拍.png',
        name: "分级降雨实拍"
      },
      {
        imgUrl: '/imgs/yancheng/智能网联环境多维模拟平台/分级降雾实拍.png',
        name: "分级降雾实拍"
      }
    ]
  },
  {
    btnName: '呼伦贝尔牙克石高寒测试基地',
    desc: ['拥有国内唯一“国家高寒机动车质量检验检测中心”资质，满足汽车高寒工况下性能测试、功能匹配和标定试验的需求。', '1号湖：40万㎡，承重30吨；2号湖：70万㎡，承重20吨；3号湖：60万㎡，承重30吨'],
    stats: [
      { number: "13.5", unit: "亿", label: "项目总投资" },
      { number: "2500", unit: "亩", label: "测试区域面积" },
      { number: "12.5", unit: "公里", label: "测试道路长度" },
      { number: "1.3", unit: "万平方米", label: "基础配套设施" }
    ],
    imgUrl: '/imgs/yancheng/图片1.png',
    sceneItems: [
      {
        imgUrl: '/imgs/yancheng/冰雪圆环.png', // 图片路径
        name: "冰雪圆环" // 下方文字
      },
      {
        imgUrl: '/imgs/yancheng/操控路.png',
        name: "操控路"
      },
      {
        imgUrl: '/imgs/yancheng/冰广场.png',
        name: "冰广场"
      },
      {
        imgUrl: '/imgs/yancheng/雪广场.png',
        name: "雪广场"
      },
      {
        imgUrl: '/imgs/yancheng/ABS对开路、棋盘路.png',
        name: "ABS对开路、棋盘路"
      },
      {
        imgUrl: '/imgs/yancheng/TCS对开坡道.png',
        name: "TCS对开坡道"
      },
    ]
  }
];
// 2. 响应式状态：当前页码（0-4，对应5页内容）
const currentPage3 = ref(0);
// 3. 自动轮播定时器
let timer3 = null;
// 切换到指定页
const handleClick3 = (index) => {
  currentPage3.value = index;
  resetTimer3(); // 点击后重置定时器，避免立即自动切换
};
// 切换到下一页（循环）
const goToNextPage3 = () => {
  currentPage3.value = (currentPage3.value + 1) % pages3.length;
};
// 重置定时器
const resetTimer3 = () => {
  clearInterval(timer3);
  // timer3 = setInterval(goToNextPage3, 5000); // 5秒切换一次
};
//右边第三块块数据
const pages3 = [
  {
    btnName: '高寒测试',
    desc: ['牙克石测试基地', '陈旗测试基地'],
    items: ['低温充电', '空调采暖', '底盘关键性能测评', '低温续驶里程', '高寒可靠性'],
    imgUrl: '/imgs/yancheng/高寒测试.jpg',
  },
  {
    btnName: '高温测试',
    desc: ['火焰山测试基地', '艾丁湖汽车试验场', '极地汽车试验场',],
    items: ['空调降温', '热平衡', '高温voc', '高温能耗', '高温可靠性'],
    imgUrl: '/imgs/yancheng/高温测试.png',
  },

  {
    btnName: '高原测试',
    desc: ['格尔木测试基地海拔2800m，气压72.4 KPa'],
    items: ['动力性', '油耗', '制动', '高原冷启动', '高原可靠性'],
    imgUrl: '/imgs/yancheng/高原测试.png',
  },
  {
    btnName: '高腐蚀测试',
    desc: ['高低温仓12个', '盐雾仓2台'],
    items: ['模拟沿海地区盐雾沉降、北方冬季冰雪路面撒盐的腐蚀环境，通过多种试验工况，考核并评价汽车在恶劣使用条件下的抗腐蚀性能'],
    imgUrl: '/imgs/yancheng/高腐蚀测试.png',
  },



];
//右边第二部分数据内容
const functionTags = ref([
  {
    tagName: "可靠性试验",
    content: {
      contentModules: [
        // 版型1：标题+文字+单图
        {
          type: "text-img",
          title: "试验规范转场",
          desc: "具备基于损伤等效制定新场地耐久试验规范的全过程服务能力。",
          mainImg: "/imgs/yancheng/可靠性测试/试验规范转场.jpg"
        },
        {
          type: "text-img",
          title: "试验目标用户关联",
          desc: "具备基于用户关联确定产品耐久性开发目标及验证方案的能力。",
          mainImg: "/imgs/yancheng/可靠性测试/试验目标用户关联.png"
        },
        {
          type: "text-img",
          title: "全流程试验管理",
          desc: "利用高精定位系统进行试验全过程监控，保障试验安全准确高效。",
          mainImg: "/imgs/yancheng/可靠性测试/全流程试验管理.png"
        }
      ]
    }
  },
  {
    tagName: "性能试验",
    content: {
      contentModules: [
        // 版型2：标签+文字+多图
        {
          type: "tags-imgs",
          tags: ["动力性", "经济性", "制动性能", "操纵稳定性", "NVH", "轮胎综合性", "爆胎测试"],
          desc: "依托于整车道路测试能力，以整车级性能研发验证为核心，不断改进传统试验方法，为客户提供高效便捷的服务方案。",
          imgs: [
            { url: "/imgs/yancheng/低附操稳试验.png", name: "低附操稳试验" },
            { url: "/imgs/yancheng/多通道试验数据采集.png", name: "多通道试验数据采集" }
          ]
        }
      ]
    }
  },
  {
    tagName: "智能网联试验",
    content: {
      contentModules: [
        // 版型3：子模块+多列文字
        {
          type: "submodules-columns",
          mainTitle: "主动安全场景模拟-智能网联汽车主动安全场景模拟辅助测试技术服务",
          subModules: [
            { url: "/imgs/yancheng/Launchpad 80.png", name: "可导航目标车GST 120" },
            { url: "/imgs/yancheng/可导航目标车GST 120.png", name: "Launchpad 80" },
            { url: "/imgs/yancheng/模拟目标物（行人）.png", name: "模拟目标物（行人）" },
            { url: "/imgs/yancheng/模拟目标物（两轮车）.png", name: "模拟目标物（两轮车）" }
          ],
          columns: [
            {
              title: "业务能力",
              content: [
                "为客户开展主动安全系统开发验证",
                "场景模拟测试设备",
                "测试工程师团队",
                "专业场地场景搭建"
              ]
            },
            {
              title: "服务特色",
              content: [
                "结合专业的隧道、高架桥、",
                "雨雾、灯光等特色场景，探",
                "索和创新测试，提升ADAS试",
                "验研发测试效率。"
              ]
            }
          ]
        }
      ]
    }
  }
]);
// 当前激活的功能标签名
const activeTag = ref(functionTags.value[0].tagName);
// 当前显示的内容对象
const currentContent = ref(functionTags.value[0].content);
// --- 3. 定义事件处理函数 ---
// 当功能标签被点击时触发
const handleTagClick = (tag) => {
  // 更新激活的标签名
  activeTag.value = tag.tagName;
  // 更新当前显示的内容
  currentContent.value = tag.content;
};

// 当前显示的图片索引
const currentImgIndex = ref(0);
// 切换计时器
let switchTimer = null;
// 自动切换图片
const startAutoSwitch = () => {
  switchTimer = setInterval(() => {
    currentImgIndex.value = (currentImgIndex.value + 1) % certificateImages.value.length;
  }, 5000); // 每5秒切换一次
};
const headTitle = ref('中国汽车技术研究中心有限公司数字沙盘')
// 1. 轮播图片数据（替换为你的实际图片路径）
const images = ref([
  'imgs/wuhan/轮播一.jpg',  // 第一张图（示例图中的赛道图）
  'imgs/wuhan/轮播二.jpg',  // 第二张图
  'imgs/wuhan/轮播三.png',  // 第三张图（根据实际数量增减）
]);
// 2. 响应式状态：当前显示的图片索引
const currentIndex = ref(0);
// 定时器标识（用于自动切换）
let carouselTimer = null;
// 3. 自动切换逻辑：每5秒切换到下一张
const autoSwitch = () => {
  // 计算下一张索引（最后一张切换到第一张）
  currentIndex.value = (currentIndex.value + 1) % images.value.length;
};
// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;
// 响应式状态：控制弹窗显示
const showVideo = ref(false);
// 视频DOM引用（用于控制播放/暂停）
const videoRef = ref(null);
// 视频地址（待提供，先定义变量占位）
const videoUrl = ref('');
// 初始化 Lottie 动画
const initLottieAnimation = () => {
  if (lottieRef.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieRef.value,
      path: '/animations/yancheng.json',
      loop: true,
      autoplay: true,
    });
  }
};

// 修改initScrollAnimations函数，实现不同数量条目下的同步滚动
const initScrollAnimations = () => {
  const containers = Array.from(document.querySelectorAll('.scroll-container'));
  if (containers.length === 0) return;
  // 全局配置（所有容器共享的滚动节奏）
  const pauseTime = 2500; // 统一停顿时间（2.5秒）
  const scrollDuration = 500; // 统一滚动动画时间（0.5秒）
  let isAnimating = false; // 全局动画锁，防止并发滚动
  let globalTimer = null; // 全局计时器控制同步节奏
  // 为每个容器初始化独立状态（记录自己的进度）
  const containerStates = containers.map(container => {
    const items = Array.from(container.querySelectorAll('.scroll-item:not(.copy-first)'));
    const itemCount = items.length;
    // 复制第一个条目用于自己的无缝循环
    const copyFirst = container.querySelector('.copy-first');
    copyFirst.innerHTML = items[0] ? items[0].innerHTML : '';
    copyFirst.style.display = itemCount > 0 ? 'flex' : 'none';
    return {
      container, // 容器DOM
      items, // 自己的条目列表
      itemCount, // 自己的条目总数（如3或8）
      currentIndex: 0, // 自己当前的索引
      width: container.offsetWidth // 自己的宽度（支持不同列宽度）
    };
  });
  // 同步触发所有容器滚动（各自走自己的下一个索引）
  const scrollAll = () => {
    if (isAnimating) return;
    isAnimating = true;
    // 每个容器计算自己的下一个索引和目标位置
    containerStates.forEach(state => {
      if (state.itemCount === 0) return; // 无内容则不滚动
      // 计算自己的下一个索引（独立循环）
      let nextIndex = state.currentIndex + 1;
      // 目标位置：如果是最后一个条目，下一个滚动到复制的条目（用于无缝循环）
      const targetPosition = nextIndex <= state.itemCount
        ? -nextIndex * state.width
        : -state.itemCount * state.width; // 最后一个条目后，先滚动到复制的条目
      // 应用滚动（所有容器同时开始动画）
      state.container.style.transition = `transform ${scrollDuration}ms ease`;
      state.container.style.transform = `translateX(${targetPosition}px)`;
      // 更新自己的索引（临时存为nextIndex，动画结束后确认）
      state.tempNextIndex = nextIndex;
    });
    // 动画结束后处理每个容器的状态（独立复位）
    setTimeout(() => {
      containerStates.forEach(state => {
        if (state.itemCount === 0) return;
        // 如果滚动到了复制的条目（超出自己的条目总数），则无缝复位
        if (state.tempNextIndex > state.itemCount) {
          state.container.style.transition = 'none'; // 取消动画，瞬间复位
          state.container.style.transform = 'translateX(0)';
          state.currentIndex = 0; // 重置为第一个条目
          // 重新启用过渡效果（下次滚动生效）
          setTimeout(() => {
            state.container.style.transition = `transform ${scrollDuration}ms ease`;
          }, 50);
        } else {
          // 正常更新索引
          state.currentIndex = state.tempNextIndex;
        }
      });
      isAnimating = false;
      startGlobalTimer(); // 所有容器处理完后，启动下一次全局计时
    }, scrollDuration);
  };
  // 全局计时器：控制所有容器同步停顿后滚动
  const startGlobalTimer = () => {
    clearTimeout(globalTimer);
    globalTimer = setTimeout(scrollAll, pauseTime);
  };
  // 全局暂停/继续：鼠标悬停任何容器，所有容器一起暂停
  containers.forEach(container => {
    container.addEventListener('mouseenter', () => {
      clearTimeout(globalTimer);
    });
    container.addEventListener('mouseleave', () => {
      if (!isAnimating) {
        startGlobalTimer();
      }
    });
  });
  // 初始启动
  startGlobalTimer();
};
//跳转路由
const goToService = (item) => {
  router.push({ name: item })
}
onMounted(() => {
  timer2 = setInterval(goToNextPage2, 5000);
  // 初始延迟5秒后开始自动切换，之后每5秒一次
  carouselTimer = setInterval(autoSwitch, 5000);
  startAutoSwitch();
  initLottieAnimation();
  // 等待DOM完全渲染后初始化滚动动画
  nextTick(() => {
    initScrollAnimations();
  });
})
// 组件销毁时清除定时器（防止内存泄漏）
onUnmounted(() => {
  // 组件销毁时清除定时器，避免内存泄漏
  clearInterval(carouselTimer);
  clearInterval(switchTimer);
  clearInterval(timer2);
});
onBeforeUnmount(() => {
  // 清除计时器，避免内存泄漏
  if (switchTimer) {
    clearInterval(switchTimer);
  }
});
</script>
<style scoped>
/* 外层容器（与之前板块样式统一） */
.contentright3 {
  display: flex;
  padding: 16px;
  color: #fff;
  width: 1461px;
  height: 413px;
  background-image: url("/imgs/yancheng/矩形 933 拷贝 3.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  /* 垂直标题（复用之前的样式） */
  .title {
    writing-mode: vertical-rl;
    font-family: "微软雅黑粗体";
    font-size: 32px;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.6) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 16px;
    padding: 8px;
  }

  /* 内容容器：分左右两个区域 */
  .content-wrapper3.media-layout {
    flex: 1;
    display: flex;
    gap: 20px;

    /* 单个区域（新品发布/媒体活动） */
    .media-section {
      flex: 1;
      padding: 12px;
      width: 653px;
      height: 367px;
      background-image: url("/imgs/yancheng/矩形 933 拷贝 12.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;

      /* 区域子标题（新品发布/媒体活动） */
      .section-subtitle {
        font-size: 20px;
        color: #37ADFF;
        margin: 0 0 12px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(46, 183, 229, 0.2);
        writing-mode: vertical-rl;
        width: 29px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 29px;
        color: #FFFFFF;
        line-height: 42px;
      }

      /* 图片网格：2×2布局 */
      .media-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;

        /* 图片卡片 */
        .media-card {
          border: 1px solid rgba(46, 183, 229, 0.3);
          border-radius: 4px;
          overflow: hidden;
        }

        /* 卡片图片 */
        .media-img {
          width: 283px;
          height: 126px;
          object-fit: cover;
        }

        /* 卡片底部文字说明 */
        .media-caption {
          width: 283px;
          margin: 0;
          padding: 8px;
          text-align: center;
          font-size: 14px;
          background-color: rgba(10, 25, 41, 0.7);
        }
      }
    }
  }
}







/* 外层容器样式 */
.contentright2 {
  display: flex;
  border-radius: 8px;
  padding: 16px;
  align-items: center;
  width: 1461px;
  height: 412px;
  background-image: url("/imgs/yancheng/矩形 933 拷贝 3.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  /* 垂直标题样式（匹配截图） */
  .title {
    writing-mode: vertical-rl;
    font-family: "微软雅黑粗体";
    font-size: 32px;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.6) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 16px;
    padding: 8px;
  }

  /* 内容容器（左侧描述+右侧卡片） */
  .content-wrapper3 {
    flex: 1;
    display: flex;
    gap: 16px;
  }

  /* 左侧描述面板（匹配截图样式） */
  .desc-panel {
    display: flex;
    align-items: center;
    justify-items: center;
    background-image: url("/imgs/yancheng/矩形 1269(2).png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 16px;
    width: 238px;
    height: 365px;
    font-family: "微软雅黑常规";
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
  }

  /* 右侧卡片容器（横向排列3个卡片） */
  .card-container2 {
    flex: 1;
    display: flex;
    gap: 16px;
  }

  /* 单个卡片样式 */
  .card-item2 {
    align-items: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 238px;
    height: 365px;
    background-image: url("/imgs/yancheng/矩形 933 拷贝 9.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  /* 卡片内图片样式（匹配截图的图片展示） */
  .card-image2 {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  /* 卡片标题样式 */
  .card-title2 {
    margin: 0;
    padding: 10px 12px;
    width: 200px;
    font-family: "微软雅黑粗体";
    font-size: 25px;
    color: #FFFFFF;
    line-height: 40px;
  }

  /* 卡片列表项样式（匹配截图的蓝色方块前缀） */
  .card-content2 {
    list-style: none;
    padding: 12px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 14px;
    align-content: center;
    justify-content: space-between;
    align-items: center;
  }

  .card-content2 li {
    position: relative;
    padding-left: 12px;
    /* width: 83px; */
    font-family: "微软雅黑常规";
    font-weight: 400;
    font-size: 21px;
    color: #FFFFFF;
    line-height: 44px;
  }

  /* 列表项前的蓝色方块（匹配截图） */
  .card-content2 li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 8px;
    height: 8px;
    background-color: #37ADFF;
  }
}



/* 标题样式 */
.section-title {
  margin-bottom: 30px;
  position: relative;
  padding-left: 10px;
}

.section-title h2 {
  font-size: 2rem;
  color: #2eb7e5;
  margin: 0;
  position: relative;
  display: inline-block;
}

.section-title h2::before {
  content: '数字试验场';
  position: absolute;
  left: -10px;
  top: 0;
  color: transparent;
  z-index: -1;
}

/* 主体内容容器 */
.content-wrapper2 {
  display: flex;
  gap: 20px;
  width: 100%;
  border-radius: 8px;
  padding: 20px;
}

/* 左侧图片区域 */
.images-container {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.image-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.test-image {
  width: 293px;
  height: 136px;
  object-fit: cover;
  border-radius: 10px;
}

.image-caption {
  margin: 0;
  text-align: center;
  font-size: 1rem;
  color: #b0c4de;
  padding: 5px;
  background-color: rgba(22, 57, 89, 0.7);
  border-radius: 4px;
}

/* 右侧信息卡片区域 */
.cards-container {
  flex: 1;
  display: flex;
  gap: 20px;
}

.info-card {
  flex: 1;
  background-color: #163959;
  border: 1px solid rgba(46, 183, 229, 0.5);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.card-title {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  text-align: center;
  width: 200px;
  font-family: "微软雅黑粗体";
  font-size: 31px;
  color: #FFFFFF;
  line-height: 40px;
}

.card-content {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-content li {
  position: relative;
  font-family: "微软雅黑常规";
  font-weight: 400;
  font-size: 24px;
  color: #FFFFFF;
}


/* 主内容容器 */
.main-content-container {
  padding: 20px;
}

.main-content-area {
  margin-bottom: 30px;
  padding: 15px;
  border-radius: 8px;
}

/* 版型1：text-img样式 */
.content-modules {
  display: inline-block;
  width: 200px;
  vertical-align: top;
}

.module-card {
  padding: 10px;
}

.module-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.module-desc {
  font-size: 14px;
  line-height: 1.6;
}

.main-img-wrapper {
  display: inline-block;
  margin-left: 20px;
}

.main-img {
  width: 200px;
  height: 120px;
  object-fit: cover;
}

/* 版型2：tags-imgs样式 */
.performance-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.tag {
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 20px;
}

.performance-imgs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.img-item img {
  width: 120px;
  height: 80px;
  object-fit: cover;
}

.img-name {
  font-size: 12px;
}

/* 版型3：submodules-columns样式 */
.intelligent-main-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.intelligent-submodules {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.submodule img {
  width: 150px;
  height: 100px;
  object-fit: cover;
}

.intelligent-columns {
  display: flex;
  gap: 30px;
}

.column {
  flex: 1;
}

.column-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}



/* 在原样式基础上添加/修改以下内容 */
.right .box .content {
  /* 移除绝对定位，避免布局冲突 */
  position: relative;
  overflow: hidden;
}

/* 滚动容器设置为水平布局 */
.scroll-container {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  /* 平滑过渡效果 */
}

/* 每个滚动项占满容器宽度，确保内容居中显示 */
.scroll-item {
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
}

/* 确保图片和文字不超出边界 */
.scroll-item .img1,
.scroll-item .img2 {
  max-width: 40%;
  height: auto;
  object-fit: contain;
}

.scroll-item .contentTitle {
  max-width: 50%;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* 最多显示4行 */
  -webkit-box-orient: vertical;
}

/* 隐藏复制的条目（用于无缝循环） */
.copy-first {
  display: none;
}

/* 触发区域样式（保持原有） */
.box {
  cursor: pointer;
  /* 提示可点击 */
  /* 原有样式... */
}

@keyframes sweep {
  0% {
    background-position: -100%;
  }

  100% {
    background-position: 200%;
  }
}

/* 上下浮动动画 */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
    /* 向下移动20px */
  }
}

/* 视频弹窗：全屏覆盖 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 9600px;
  height: 2240px;
  background-color: rgba(0, 0, 0, 0.95);
  /* 深色背景突出视频 */
  z-index: 9999;
  /* 最高层级，覆盖所有内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 视频播放器：自适应全屏 */
.video-player {
  width: 9600px;
  height: 2240px;
  /* 避免超出屏幕 */
  object-fit: contain;
  /* 保持视频比例，不拉伸 */
}

/* 关闭按钮 */
.video-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s;
}

.video-close:hover {
  background-color: #ff4d4f;
  /* hover时变红，增强交互 */
}

/* 禁止页面滚动（弹窗显示时） */
:deep(body) {
  overflow: v-bind('showVideo ? "hidden" : "auto"');
}


/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
  width: 6240px;
  height: 1456px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
  width: 9600px;
  height: 2240px;
  transform: scale(0.65);
  transform-origin: 0 0;
  position: relative;
}


.lottie-box {
  z-index: 99;
  position: absolute;
  left: 969px;
  top: 386px;
  width: 885px;
  height: 889px;
  font-size: 80px;
}

.headTitle {
  text-align: center;
  position: relative;
  top: -24px;
  font-size: 130px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.left1 {
  z-index: 999;
  cursor: pointer;
  top: 45%;
  left: 10px;
  position: absolute;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/left1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.right1 {
  z-index: 999;
  cursor: pointer;
  position: absolute;
  top: 45%;
  right: 10px;
  width: 94px;
  height: 258px;
  background-image: url("/imgs/home/right1.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.headButton {
  cursor: pointer;
  display: flex;
  float: inline-end;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 78px;
  height: 78px;
  background-image: url("/imgs/ningbo/cancel.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.left {
  display: flex;

  .box {
    margin-left: 140px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      width: 100%;
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .carousel-container {
        width: 100%;
        max-width: 1200px;
        /* 根据实际场景调整 */
        margin: 0 auto;
        background-color: #051428;
        /* 深色背景，贴合设计风格 */
        border: 1px solid #1e4b79;
        border-radius: 8px;
        overflow: hidden;
        padding-bottom: 20px;
      }

      /* 图片容器样式 */
      .carousel-image-wrapper {
        border-radius: 10px;
        width: 1408px;
        height: 645px;
        position: relative;
        overflow: hidden;
      }

      .carousel-image {
        border-radius: 10px;
        width: 1408px;
        height: 645px;
        object-fit: cover;
        /* 图片自适应填充，保持比例 */
      }

      /* 圆点指示器样式 */
      .carousel-dots {
        position: absolute;
        top: 52%;
        display: flex;
        gap: 20px;
        z-index: 10
      }

      .dot {
        display: flex;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        /* 圆形 */
        background-color: #919FA7;
        /* 未激活状态：半透明白色 */
        cursor: pointer;
        transition: all 0.3s;
        /* 切换动画 */
      }

      .dot.active {
        background-color: #70C3F5;
        /* 激活状态：亮蓝色（贴合科技感） */
        transform: scale(1.2);
        /* 激活时略微放大 */
      }

      .img1 {
        width: 1408px;
        height: 645px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
        /* top: -168px; */
        text-indent: 3.5ch;
        width: 1356px;
        height: 100px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 31px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    margin-left: 132px;
    display: flex;
    width: 1372px;
    height: 168px;
    background-image: url("/imgs/ningbo/t.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .headImg {
      margin-left: 220px;
      margin-top: 41px;
      width: 53px;
      height: 58px;
      background-image: url("/imgs/ningbo/菱形 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title {
      margin-left: 30px;
      margin-top: 22px;
      height: 49px;
      font-family: "微软雅黑粗体";
      font-weight: 400;
      font-size: 57px;
      color: #FFFFFF;
    }

    .content {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      top: 378px;
      width: 1476px;
      height: 1096px;
      background-image: url("/imgs/ningbo/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      align-items: anchor-center;
      gap: 50px;

      .content1-1 {
        width: 1193px;
        height: 988px;
        background-image: url("/imgs/yancheng/组 7779.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }

  .box3 {
    display: flex;
    position: absolute;
    margin-top: 1256px;
    margin-left: 132px;
    display: flex;

    /* margin-left: 76px;
    display: flex;
    position: relative;
    top: 530px;
    flex-wrap: wrap; */
    flex-direction: row;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      /* 关键：背景固定，不随内容滚动 */
      margin-top: 166px;
      margin-left: 120px;
      position: absolute;
      width: 908px;
      height: 396px;
      background-image: url("/imgs/ningbo/图层 1014 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;

      .img1 {
        width: 234px;
        height: 305px;
      }

      .img2 {
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        width: 300px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 63px;
        text-align: left;
      }

      /* 滚动容器：用于承载滚动内容 */
      .scroll-container {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      /* 单个滚动项：确保内容正确显示 */
      .scroll-item {
        align-items: center;
        justify-content: space-between;
        width: 98%;
        /* height: 350px; */
        display: flex;
        align-items: center;
      }

      /* 图片和文字样式保持不变，确保在滚动项中居中 */
      .img1 {
        margin: 0 auto !important;
        width: 400px !important;
        height: 277px !important;
      }

      .img2 {
        margin: 0 auto !important;
        width: 400px;
        height: 277px;
      }

      .contentTitle {
        padding: 0 20px;
        text-align: left;
        width: 300px;
        font-size: 30px;
        text-align: center;
      }

      /* 复制的第一个条目初始隐藏 */
      .copy-first {
        display: none;
      }
    }

  }
}

.middle {
  position: absolute;
  left: 3364px;
  top: 257px;
  width: 2874px;
  height: 521px;
  background-image: url("/imgs/ningbo/矩形 606.png");
  background-position: left;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .img1 {
    position: relative;
    left: 105px;
    top: 135px;
    width: 485px;
    height: 160px;
    background-image: url("/imgs/yancheng/标记 (1).png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .img2 {
    position: relative;
    left: 800px;
    top: 20px;
    width: 1858px;
    height: 75px;
    background-image: url("/imgs/guangzhou/heng.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .content {
    top: -159px;
    left: 768px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content2 {
    top: -74px;
    left: 1114px;
    position: relative;
    width: 200px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content3 {
    top: -381px;
    left: 1433px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content4 {
    top: -301px;
    left: 1827px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content5 {
    top: -599px;
    left: 2154px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }

  .content6 {
    top: -510px;
    left: 2520px;
    position: relative;
    width: 300px;

    .years {
      font-family: "微软雅黑常规";
      font-weight: bold;
      font-size: 29px;
      color: #D6F9FF;
      line-height: 43px;
    }

    .values {
      font-family: "微软雅黑常规";
      font-weight: 400;
      font-size: 18px;
      color: #D6F9FF;
      line-height: 29px;
    }
  }


  .content15 {
    display: flex;
    transform: translateX(90%);
    position: absolute;
    top: 420px;
    /* left: 238px; */
    font-family: FZLanTingHeiS-B-GB;
    font-weight: 400;
    font-size: 53px;
    color: #FFFFFF;
    background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 1200px;
  }

  .content18 {
    top: 550px;
    z-index: 999;
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    justify-self: anchor-center;
    /* left: 97px; */
    z-index: 999;

    .tubiao1 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/yancheng/组 7752.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao2 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/yancheng/组 7752 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiao3 {
      width: 102px;
      height: 102px;
      background-image: url("/imgs/yancheng/组 7752 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .tubiaoTitle {
      margin-left: 20px;
      margin-right: 20px;
      position: relative;
      top: -29px;
      width: auto;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 42px;
      color: #FFFFFF;
      background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
      -webkit-background-clip: text;

      .tubiaoValue {
        position: relative;
        top: 9px;
        margin-left: 20px;
        margin-right: 20px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 86px;
        color: #FFFFFF;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(45deg,
            transparent 35%,
            rgba(#fff, 0.6),
            transparent 65%) no-repeat,
          currentColor;
        background-size: 50%;
        -webkit-background-clip: text;
        animation: sweep 2s infinite;
        background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .content19 {
    display: flex;
    position: absolute;
    top: 420px;
    left: 0;
    width: 2808px;
    height: 1641px;
    background-image: url("/imgs/ningbo/中间地球 2副本.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .img1 {
      position: relative;
      left: 532px;
      top: 287px;
      width: 1467px;
      height: 1199px;
      background-image: url("/imgs/ningbo/组 7764.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img2 {
      transform: scaleX(1.5);
      position: relative;
      left: 185px;
      top: 846px;
      width: 143px;
      height: 157px;
      background-image: url("/imgs/shanghai/形状 797 拷贝 2.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img3 {
      z-index: 99999;
      position: relative;
      left: 125px;
      top: 880px;
      width: 34px;
      height: 45px;
      background-image: url("/imgs/ningbo/点位 (3).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img4 {
      position: absolute;
      left: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .img5 {
      position: absolute;
      right: -200px;
      top: 170px;
      width: 620px;
      height: 884px;
      background-image: url("/imgs/ningbo/CFL.png");
      transform: scaleX(-1);
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }


    .title {
      left: 1790px;
      top: 876px;
      position: absolute;
      font-family: FZLanTingHeiS-B-GB;
      font-weight: 400;
      font-size: 38px;
      color: #FFFFFF;
      background: linear-gradient(0deg, #E9DD7A 100%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .pointImg {
      position: absolute;
      top: 359px;
      left: 915px;
      width: 918px;
      height: 933px;
      background-image: url("/imgs/home/地图层 拷贝.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
}

.right {
  display: flex;
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  left: 6363px;
  top: 200px;
  gap: 0 190px;

  .box {
    display: flex;
    flex-direction: row;
    margin-left: 73px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }
  }

  .box2 {
    margin-left: 172px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;

    .contentbox {
      text-align: center;
      font-family: "微软雅黑粗体";
      font-size: 36px;
      color: #FFFFFF;
      line-height: 72px;
      width: 2946px;
      height: 75px;
      background-image: url("/imgs/tianjinnewenergy/矩形 933 拷贝 4.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .content {
      flex-direction: column;
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      align-items: center;
      align-self: end;
      width: 722px;
      height: 419px;
      gap: 12px;
      background-image: url("/imgs/tianjinnewenergy/矩形 933 拷贝 6.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .img {
        width: 181px;
        height: 257px;
        /* background-image: url("/imgs/tianjinnewenergy/矩形 933 拷贝 6.png"); */
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .img2 {
        width: 334px;
        height: 287px;
        background-image: url("/imgs/tianjinnewenergy/图片54.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .text {
        position: absolute;
        top: 609px;
        font-family: "微软雅黑常规";
        /* width: 525px; */
        font-weight: 400;
        font-size: 33px;
        color: #FFFFFF;
        line-height: 46px;
      }

      /* 新增：小白点样式 */
      .content1-1::before {
        content: '';
        display: inline-block;
        margin-right: 15px;
        /* 白点与文字的间距 */
        vertical-align: middle;
        width: 20px;
        height: 20px;
        background-image: url("/imgs/guangzhou/椭圆 767.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .rightbox {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .content1-1 {
          /* 核心修改：将水平居中改为左对齐 */
          justify-content: flex-start;
          /* 增加左侧内边距，让内容从左侧有一定缩进（根据视觉效果调整） */
          padding-left: 40px;
          /* 其他原有样式保留 */
          display: flex;
          align-items: center;
          height: 46px;
          font-family: "微软雅黑常规";
          font-weight: 400;
          color: #FFFFFF;
          line-height: 40px;
          width: 400x;
          font-weight: 400;
          font-size: 19px;
          color: #FFFFFF;
        }
      }

    }
  }

  .box3 {
    margin-left: 76px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 30px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      /* position: absolute; */
      align-items: anchor-center;
      top: 178px;
      left: 180px;
      gap: 24px;
      width: 2946px;
      height: 413px;
      background-image: url("/imgs/shanghai/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      /* flex-wrap: wrap; */
      align-content: center;
      justify-content: center;
      flex-direction: row;

      .title {
        margin: 20px;
        writing-mode: vertical-rl;
        font-family: "微软雅黑粗体";
        font-size: 39px;
        color: #FFFFFF;
        line-height: 32px;
        background: linear-gradient(0deg, rgba(46, 131, 183, 0.6) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .left-content {
        display: flex;
        justify-items: center;
        align-items: center;
        gap: 32px;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        width: 236px;
        height: 365px;
        background-image: url("/imgs/yancheng/组 7813.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .content-text {
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 25px;
          color: #FFFFFF;
        }
      }



      /* --- 整体布局 --- */
      .one-stop-container {
        display: flex;
        gap: 20px;
        padding: 20px;
        background-color: #0a1931;
        color: #e0e0e0;
        min-height: 600px;
        /* 根据需要调整 */
      }

      /* --- 左侧区域样式 --- */
      .left-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        width: 120px;
      }

      .left-title {
        font-size: 18px;
        font-weight: bold;
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: 2px;
        color: #4285f4;
      }

      .left-navs {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
      }

      .nav-btn {
        padding: 10px 5px;
        text-align: center;
        background-color: rgba(10, 30, 60, 0.7);
        border: 1px solid rgba(66, 133, 244, 0.3);
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s ease-in-out;
      }

      .nav-btn:hover {
        border-color: #4285f4;
        color: #4285f4;
      }

      /* --- 中间功能标签样式 --- */
      .function-tags {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-top: 20px;
      }

      .tag-btn {
        padding: 12px 10px;
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 237px;
        height: 113px;
        background-image: url("/imgs/yancheng/矩形 1269(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-family: "微软雅黑粗体";
        font-size: 28px;
        color: #FFFFFF;
        line-height: 70px;
        cursor: pointer;
        /* 添加 cursor 以明确是可点击的 */
      }

      .tag-btn.active {
        width: 237px;
        height: 113px;
        background-image: url("/imgs/yancheng/矩形 1269.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      /* 多模块容器：横向排列 */
      .main-content-container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        /* 超出换行 */
      }

      /* 单个主内容区域：保持原样式 */
      .main-content-area {
        display: flex;
        flex-direction: row;
        width: 743px;
        height: 366px;
        background-image: url("/imgs/yancheng/矩形 933 拷贝 7.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        align-items: center;
        justify-content: center;
        padding: 20px;
        gap: 20px;
      }

      /* 主图和文字样式保持不变 */
      .main-img-wrapper {
        border-radius: 8px;
        overflow: hidden;
      }

      .main-img {
        width: 482px;
        height: 366px;
        object-fit: cover;
      }

      .content-modules {
        flex: 1;
      }

      .module-card {
        padding: 20px;
      }

      .module-title {
        width: 166px;
        font-family: "微软雅黑粗体";
        font-weight: bold;
        font-size: 28px;
        color: #FFFFFF;
        line-height: 40px;
      }

      .module-desc {
        width: 201px;
        font-family: "微软雅黑常规";
        font-weight: 400;
        font-size: 25px;
        color: #FFFFFF;
        line-height: 40px;
      }

      /* <div class="content-modules">
        <div class="module-card">
          <div class="module-title">{{ module.title }}</div>
          <div class="module-desc">{{ module.desc }}</div>
        </div>
      </div>
      */

      /* 按钮选中状态（变色效果） */
      .left-buttons .btn.active {
        width: 237px;
        height: 82px;
        background-image: url("/imgs/shanghai/矩形 1269.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .left-buttons {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        gap: 10px;

        .btn {
          padding: 20px;
          display: flex;
          align-items: anchor-center;
          text-align: center;
          width: 237px;
          height: 82px;
          background-image: url("/imgs/shanghai/矩形 1269(3).png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-family: "微软雅黑常规";
          font-size: 24px;
          color: #FFFFFF;
          line-height: 28px;

        }
      }

      .rightbox {
        display: flex;
        flex-direction: row;
        height: 366px;
        background-image: url("/imgs/yancheng/矩形 933 拷贝 7.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        /* 圆点伪元素 */
        .box1-1 .text::before {
          content: "";
          /* 空内容，通过样式生成圆点 */
          position: absolute;
          left: 0;
          top: 5px;
          width: 11px;
          height: 11px;
          background-image: url("/imgs/wuhan/组 7798 拷贝 6.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .content-wrapper {
          display: flex;

          .box1-1 {
            justify-content: space-around;
            display: flex;
            align-items: center;
            flex-direction: column;
            padding: 20px;

            .text {
              position: relative;
              /* 为伪元素定位做准备 */
              padding-left: 30px;
              width: 579px;
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              line-height: 29px;
            }

            .btn {
              width: 178px;
              height: 59px;
              background: #1E4B79;
              border-radius: 18px;
              font-family: "微软雅黑常规";
              font-weight: bold;
              font-size: 26px;
              color: #FFFFFF;
              line-height: 60px;
              text-align: center;
            }

            .item {
              display: flex;
              flex-direction: row;

              .item1 {
                width: 110px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 24px;
                color: #37D7FF;
                line-height: 31px;
              }

              .icon {
                width: 1px;
                height: 37px;
                background: #37ADFF;
              }
            }
          }
        }

        .box1-2 {
          width: 660px;
          height: 367px;
          background-image: url("/imgs/yancheng/编号3.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

      }


      /* 新增：动态图片布局容器 */
      .scene-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        /* 新增：单个图片项 */
        .scene-item {
          display: flex;
          flex-direction: column;
          gap: 8px;
          border: 1px solid rgba(66, 133, 244, 0.3);
          border-radius: 4px;
          overflow: hidden;
        }

        /* 新增：图片样式 */
        .scene-img {
          width: 310px;
          height: 148px;
          /* 固定图片高度 */
          object-fit: cover;
        }

      }


      /* items 横向排列容器 */
      .content-items {
        width: 400px;
        display: flex;
        flex-wrap: wrap;
        /* 超出换行 */
        gap: 15px;
        /* 项目之间的间距 */
        padding: 15px;
        border-radius: 4px;
        margin-top: 20px;
      }

      /* 单个 item 样式 */
      .content-items .item {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        white-space: nowrap;
        /* 防止文字换行 */
      }

      /* 分隔符 | 样式 */
      .content-items .separator {
        color: #4285f4;
        /* 蓝色分隔符，与主题呼应 */
        font-weight: bold;
        margin-left: 15px;
      }



      /* 统计数据网格（2行2列） */
      .stats-grid2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2列等宽 */
        grid-template-rows: repeat(2, 1fr);
        /* 2行等高 */
        gap: 2px;

        /* 统计项之间的间距 */
        /* 单个统计项 */
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          /* 文字居中 */
          padding: 0px;

          /* 大数字 */
          .stat-number {
            /* width: 200px; */
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 36px;
            /* font-size: 56px; */
            color: #FFFFFF;
            background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            /* 单位（紧跟数字） */
            .stat-unit {
              width: 21px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 22px;
              color: #FFFFFF;
              background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              margin-left: 5px;
            }
          }

          /* 统计说明文字 */
          .stat-label {
            /* width: 103px; */
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 21px;
            color: #FFFFFF;
            line-height: 37px;
            margin-top: 5px;
          }
        }
      }
    }
  }

  .box4 {
    margin-left: 76px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 30px;

    .headbox {
      display: flex;
      height: 158px;
      width: 1652px;
      flex-wrap: nowrap;
      flex-direction: row;
      background-image: url("/imgs/ningbo/t(1).png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .headImg {
        margin-left: 220px;
        margin-top: 41px;
        width: 53px;
        height: 58px;
        background-image: url("/imgs/ningbo/菱形 拷贝.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .title {
        margin-left: 30px;
        margin-top: 22px;
        height: 49px;
        font-family: "微软雅黑粗体";
        font-weight: 400;
        font-size: 57px;
        color: #FFFFFF;
      }
    }

    .content {
      /* position: absolute; */
      align-items: anchor-center;
      top: 178px;
      left: 180px;
      gap: 24px;
      width: 1461px;
      height: 412px;
      background-image: url("/imgs/yancheng/矩形 933 拷贝 3.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      /* flex-wrap: wrap; */
      align-content: center;
      /* justify-content: center; */
      flex-direction: row;

      .title {
        margin: 20px;
        writing-mode: vertical-rl;
        font-family: "微软雅黑粗体";
        font-size: 39px;
        color: #FFFFFF;
        line-height: 32px;
        background: linear-gradient(0deg, rgba(46, 131, 183, 0.6) 10%, rgba(255, 255, 255, 1) 70%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .left-content {
        display: flex;
        justify-items: center;
        align-items: center;
        gap: 32px;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        width: 236px;
        height: 365px;
        background-image: url("/imgs/yancheng/组 7813.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .content-text {
          font-family: "微软雅黑常规";
          font-weight: 400;
          font-size: 25px;
          color: #FFFFFF;
        }
      }

      /* 按钮选中状态（变色效果） */
      .left-buttons .btn.active {
        width: 237px;
        height: 82px;
        background-image: url("/imgs/shanghai/矩形 1269.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .left-buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        gap: 10px;

        .btn {
          padding: 20px;
          display: flex;
          align-items: anchor-center;
          text-align: center;
          width: 237px;
          height: 82px;
          background-image: url("/imgs/shanghai/矩形 1269(3).png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-family: "微软雅黑常规";
          font-size: 24px;
          color: #FFFFFF;
          line-height: 28px;

        }
      }

      .rightbox {
        display: flex;
        flex-direction: row;
        /* width: 758px; */
        height: 366px;
        background-image: url("/imgs/yancheng/矩形 933 拷贝 7.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        /* 圆点伪元素 */
        .box1-1 .text::before {
          content: "";
          /* 空内容，通过样式生成圆点 */
          position: absolute;
          left: 0;
          top: 5px;
          width: 11px;
          height: 11px;
          background-image: url("/imgs/wuhan/组 7798 拷贝 6.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .content-wrapper {
          display: flex;

          .box1-1 {
            justify-content: space-around;
            display: flex;
            align-items: center;
            flex-direction: column;
            padding: 20px;

            .text {
              position: relative;
              /* 为伪元素定位做准备 */
              padding-left: 30px;
              width: 579px;
              font-family: "微软雅黑常规";
              font-weight: 400;
              font-size: 24px;
              color: #FFFFFF;
              line-height: 29px;
            }

            .btn {
              width: 178px;
              height: 59px;
              background: #1E4B79;
              border-radius: 18px;
              font-family: "微软雅黑常规";
              font-weight: bold;
              font-size: 26px;
              color: #FFFFFF;
              line-height: 60px;
              text-align: center;
            }

            .item {
              display: flex;
              flex-direction: row;

              .item1 {
                width: 110px;
                font-family: "微软雅黑常规";
                font-weight: 400;
                font-size: 24px;
                color: #37D7FF;
                line-height: 31px;
              }

              .icon {
                width: 1px;
                height: 37px;
                background: #37ADFF;
              }
            }
          }
        }

        .box1-2 {
          width: 459px;
          height: 366px;
          background-image: url("/imgs/yancheng/编号3.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

      }


      /* 新增：动态图片布局容器 */
      .scene-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        /* 新增：单个图片项 */
        .scene-item {
          display: flex;
          flex-direction: column;
          gap: 8px;
          border: 1px solid rgba(66, 133, 244, 0.3);
          border-radius: 4px;
          overflow: hidden;
        }

        /* 新增：图片样式 */
        .scene-img {
          width: 310px;
          height: 148px;
          /* 固定图片高度 */
          object-fit: cover;
        }

      }


      /* items 横向排列容器 */
      .content-items {
        width: 400px;
        display: flex;
        flex-wrap: wrap;
        /* 超出换行 */
        gap: 15px;
        /* 项目之间的间距 */
        padding: 15px;
        border-radius: 4px;
        margin-top: 20px;
      }

      /* 单个 item 样式 */
      .content-items .item {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        white-space: nowrap;
        /* 防止文字换行 */
      }

      /* 分隔符 | 样式 */
      .content-items .separator {
        color: #4285f4;
        /* 蓝色分隔符，与主题呼应 */
        font-weight: bold;
        margin-left: 15px;
      }



      /* 统计数据网格（2行2列） */
      .stats-grid2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2列等宽 */
        grid-template-rows: repeat(2, 1fr);
        /* 2行等高 */
        gap: 2px;

        /* 统计项之间的间距 */
        /* 单个统计项 */
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          /* 文字居中 */
          padding: 0px;

          /* 大数字 */
          .stat-number {
            /* width: 200px; */
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 36px;
            /* font-size: 56px; */
            color: #FFFFFF;
            background: linear-gradient(0deg, rgba(0, 216, 255, 0.66) 10%, rgba(255, 255, 255, 1) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            /* 单位（紧跟数字） */
            .stat-unit {
              width: 21px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 22px;
              color: #FFFFFF;
              background: linear-gradient(0deg, rgba(46, 131, 183, 0.66) 10%, rgba(255, 255, 255, 1) 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              margin-left: 5px;
            }
          }

          /* 统计说明文字 */
          .stat-label {
            /* width: 103px; */
            font-family: "微软雅黑常规";
            font-weight: 400;
            font-size: 21px;
            color: #FFFFFF;
            line-height: 37px;
            margin-top: 5px;
          }
        }
      }
    }
  }

}
</style>